<!--
 @description
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/14 16:32:48
-->
<template>
  <div class="search-form">
    <form action="/">
      <qmp-search
        ref="qmpSearch"
        v-model="searchValue"
        class="search-value"
        :class="{ focus: isFocus }"
        :placeholder="placeholder"
        shape="round"
        clearable
        :show-action="showAction"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
      >
        <template #action>
          <div class="btn-search" @click="onSearch">搜索</div>
        </template>
      </qmp-search>
    </form>
  </div>
</template>

<script lang="ts">
  import { toRefs, reactive, defineComponent, watch, ref, onMounted } from 'vue'
  export default defineComponent({
    name: 'SearchInput',
    props: {
      modelValue: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请输入关键词搜索'
      },
      focus: {
        type: Boolean,
        default: false
      },
      showAction: {
        type: Boolean,
        default: true
      }
    },
    emits: ['update:modelValue', 'clear', 'blur', 'focus', 'search', 'input'],
    setup(props, { emit }) {
      const qmpSearch = ref()
      const state = reactive({
        searchValue: props.modelValue || '',
        isFocus: false
      })
      const inputEvent = 'update:modelValue'

      watch(
        () => props.modelValue,
        (newVal) => {
          state.searchValue = newVal
        },
        {
          immediate: true
        }
      )
      const onFocus = () => {
        emit('focus')
        state.isFocus = true
      }
      const onInput = (e: any) => {
        const val = e.target.value
        emit('input', `${val || ''}`.trim())
      }
      const onBlur = (e: any) => {
        const val = e.target.value
        emit('blur', `${val || ''}`.trim())
        state.isFocus = false
      }

      const onSearch = () => {
        const val = state.searchValue
        emit(inputEvent, `${val || ''}`.trim())
        emit('search')
      }
      const onClear = () => {
        emit(inputEvent, '')
        emit('clear')
      }
      const getFocus = () => {
        qmpSearch.value.focus()
      }
      const getBlur = () => {
        qmpSearch.value.blur()
      }
      onMounted(() => {
        console.log('props.focus', props.focus)
        if (props.focus) {
          getFocus()
        }
      })
      return {
        ...toRefs(state),
        onFocus,
        onBlur,
        onInput,
        onSearch,
        onClear,
        qmpSearch,
        getBlur,
        getFocus
      }
    }
  })
</script>
<style lang="less" scoped>
  .search-form {
    padding: 4px 14px;
    --qmp-search-content-background-color: var(--input-bg-default);
    --qmp-search-action-padding: 0 5px;
    --qmp-padding-sm: 0;
    .search-value {
      height: 36px;
      background: var(--input-bg-default);
      border-radius: 64px;
      border: 1px solid var(--input-bg-disable);
      box-sizing: border-box;
      overflow: hidden;
      &.focus {
        border: 1px solid var(--input-line-brand);
      }
    }
    .btn-search {
      width: 48px;
      height: 28px;
      background: var(--button-main-default);
      border-radius: 999px;
      font: var(--font-control-l);
      color: var(--input-bg-default);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
